<template>
  <VueDataUi component="VueUiOnion" :dataset="props.dataset" :config="config" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { VueDataUi, type VueUiOnionDatasetItem, type VueUiOnionConfig } from 'vue-data-ui';
  import 'vue-data-ui/style.css';
  const props = defineProps({
    loading: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
    dataset: {
      type: Array as PropType<VueUiOnionDatasetItem[]>,
      required: true,
      default: () => [],
    },
  });

  const config = ref<VueUiOnionConfig>({
    responsive: true,
    useBlurOnHover: true,
    useCssAnimation: true,
    useStartAnimation: true,
    style: {
      fontFamily: 'inherit',
      chart: {
        backgroundColor: 'transparent',
        color: '#FFFFFF',
        useGradient: false,
        gradientIntensity: 20,
        layout: {
          maxThickness: 64,
          gutter: { color: '#004267', width: 0.62 },
          track: { width: 0.62 },
          labels: {
            show: true,
            fontSize: 12,
            color: '#FFFFFF',
            roundingValue: 0,
            roundingPercentage: 0,
            bold: false,
            offsetY: 0,
            offsetX: -6,
            value: { show: true },
            // percentage: { show: false },
          },
        },
        title: {
          text: '',
          color: '#1A1A1A',
          fontSize: 20,
          bold: true,
          textAlign: 'center',
          paddingLeft: 0,
          paddingRight: 0,
          subtitle: { color: '#565656', text: '', fontSize: 16, bold: false },
        },
        legend: { show: false, bold: true, backgroundColor: '#F3F4F6', color: '#1A1A1A', fontSize: 14, roundingValue: 0, roundingPercentage: 0 },
        tooltip: {
          show: true,
          backgroundColor: '#FFFFFF',
          color: '#fff',
          fontSize: 12,
          roundingValue: 0,
          roundingPercentage: 0,
          customFormat: null,
          borderRadius: 4,
          borderColor: '#e1e5e8',
          borderWidth: 1,
          showValue: true,
          showPercentage: true,
          //  backgroundOpacity: 30,
          position: 'center',
          offsetY: 24,
        },
      },
    },
    userOptions: {
      show: false,
      showOnChartHover: false,
      keepStateOnChartLeave: true,
      position: 'right',
      buttons: { tooltip: true, pdf: true, img: true, csv: true, table: true, fullscreen: true, annotator: true },
      buttonTitles: {
        open: 'Open options',
        close: 'Close options',
        tooltip: 'Toggle tooltip',
        pdf: 'Download PDF',
        csv: 'Download CSV',
        img: 'Download PNG',
        table: 'Toggle table',
        fullscreen: 'Toggle fullscreen',
        annotator: 'Toggle annotator',
      },
      print: { scale: 2 },
    },
    table: {
      show: false,
      responsiveBreakpoint: 300,
      th: { backgroundColor: '#F3F4F6', color: '#1A1A1A', outline: 'none' },
      td: { backgroundColor: '#F3F4F6', color: '#1A1A1A', outline: 'none', roundingValue: 0, roundingPercentage: 0 },
      translations: { value: 'Value', percentage: 'Percentage', serie: 'Serie' },
    },
  });
</script>
